<script setup lang="ts">
import { ref, watch } from 'vue';

const topMenuActiveIndex = ref('1');
const handleSelect = (index: string) => {
  topMenuActiveIndex.value = index;
};

import EditMusic from './page/EditMusic/index.vue';

</script>

<template>
  <el-menu
    :default-active="topMenuActiveIndex"
    v-model="topMenuActiveIndex"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    popper-class="top_menu"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">乐谱</el-menu-item>
  </el-menu>

  <!-- <router-view /> -->
  <div v-show="topMenuActiveIndex == '2'">
    <edit-music />
  </div>
</template>

<style scoped>
.top_menu {
  position: fixed;
  top: 0;
}
.el-menu--horizontal {
  height: 40px !important;
}
</style>
